import { Suspense } from "react";
import { NavLink, useRoutes } from "react-router-dom";

import Header from "./components/Header";
import routes from "./routes/routes";

function App() {
  const myRoutes = useRoutes(routes);

  return (
    <div className="wrapper">
      <Header />
      <NavLink to="/news" className="button">
        News
      </NavLink>
      <NavLink to="/count" className="button">
        Count
      </NavLink>
      <Suspense fallback={<h1>Loading</h1>}>{myRoutes}</Suspense>
    </div>
  );
}

export default App;
